<template>
  <!-- 个人通讯录 -->
  <div class="view-container tong-xun">
  <!--
      <div class="neiBian">
        <span>
          <el-button @click="openAddPage">新建</el-button>
          <el-button>导出</el-button>
          <el-button>导入</el-button>
          <el-button>移到分组</el-button>
          <el-button>发送邮件</el-button>
          <el-button>发送短信</el-button>
          <el-button>搜索</el-button>
          <el-button @click="goGroupManager">分组管理</el-button>
        </span>
      </div>-->

<!--  <header class="view-header">
    <div class="header-container">
      <div class="header-title">
        <i class="el-icon-s-grid"></i>
        <span>个人通讯录</span>
      </div>
      <div class="header-form">
        &lt;!&ndash;更多&ndash;&gt;
        <div class="header-form-item">
          <el-dropdown @command="handleCommand">
            <el-button type="default" :loading="delLoading">
              更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-refresh-right" class="color-refresh-item" command="refresh">刷新
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-edit" class="color-edit-item" command="edit">编辑</el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete" class="color-del-item" command="del">{{isBatchesDel}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="header-form-item">
          <el-button type="danger" icon="el-icon-plus" @click="openAddPage">新建</el-button>
        </div>
        <div class="header-form-item">
          <el-button type="primary" icon="el-icon-price-tag" @click="goGroupManager">分组管理</el-button>
        </div>

        &lt;!&ndash;搜索&ndash;&gt;
        &lt;!&ndash;<div class="header-form-item">
          <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
        </div>
        <div class="header-form-item title-search">
          <el-input v-model.trim="searchForm.title" placeholder="分组名称" clearable @input="fetchData"></el-input>
        </div>&ndash;&gt;
      </div>
    </div>
  </header>-->

    <list-header
      :title="'个人通讯录'"
      :delText="isBatchesDel"
      :delLoading="delLoading"
      :isNeedSearch="false"
      @del="del"
      @open-edit-dialog="openEditDialog($event)"
      @fetch-data="fetchData"
    >
    </list-header>

  <section class="table-container view-section">
    <el-table
      ref="table"
      :data="tableData"
      stripe
      border
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
    >
      <el-table-column type="selection" align="center"/>
      <el-table-column label="头像" width="80">
        <template slot-scope="s">
          <div class="img-wrap">
            <img :src="s.row.photo" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="mobileNum" label="手机号码"/>
      <el-table-column prop="userGroupName" label="分组"/>
      <el-table-column prop="email" label="电子邮件"/>
    </el-table>
  </section>

  <footer>
    <el-pagination
      :page-sizes="[10, 20, 50, 100]"
      style="text-align: right"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      :page-size="page.size"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </footer>

  <address-book-save ref="save-page" @update="fetchData"></address-book-save>

  </div>
</template>

<script>
  import AddressBookSave from '@/views/PersonalOffice/addressBook/AddressBookSave'
  import addressBookAPI from '@/api/addrbook/addbok'
  import listMixin from '@/mixin/listMixin'
  import ListHeader from '@/common/ListHeader'

  export default {
    name: 'Tonexuensel',
    mixins: [listMixin],
    components: { AddressBookSave,ListHeader },
    data() {
      return {
        mixinParams: {
          addUrl: '',
          editUrl: '',
          propertyName: 'id',
          API: addressBookAPI,
          deleteMethod: ''
        }
      }
    },
    created() {
    },
    methods: {
      fetchData() {
        addressBookAPI.myAddressBook(this.page).then(res => {
          console.log(res)
          this.tableData = res.records
          this.page.total = res.total
        })
      },
      openAddPage() {
        this.$refs['add-page'].open()
      },
      goGroupManager() {
        this.$router.push('/personal-office/addresss-book/addresss-group-manager')
      }
    }
  }
</script>

<style lang="scss">
  .tong-xun {
    .el-dialog {
      width: 40%;
      top: 50%;
      transform: translateY(-50%);
      margin-top: 0;

      .el-dialog__body {
        padding-bottom: 0;
      }

      .el-dialog__footer {
        padding-top: 0;
        padding-bottom: 20px;
      }
    }
  }
</style>

<style scoped lang="scss">
  .neiBian > span {
    display: inline-block;
    width: 100%;
    border: 1px solid rgb(214, 214, 214);
    padding: 10px;
    padding-bottom: 15px;
    padding-top: 5px;
  }

  .block {
    display: flex;
    justify-content: center;
  }

  .img-wrap {
    $number: 30px;
    width: $number;
    height: $number;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

</style>
